{% extends 'core/_base.html' %}
{% block title %} Manage Expense {% endblock title %}
{% load humanize %}
{% block body %}
<div class="container-fluid">
    <!-- Expense Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Manage Expense</h6>
        </div>
        {% if expenses %}
        <div class="card-body">
            <div class="text-center">
                <a class="hover:no-underline" href="{% url 'download_expense_csv' %}">
                    <button class="py-1 px-2 text-white rounded-lg bg-green-400 block md:inline-block">
                    CSV
                    <i class="fas fa-file-csv"></i>
                    </button>
                </a>
                <a class="hover:no-underline" href="{% url 'download_expense_excle' %}">
                    <button class="py-1 px-2 text-white rounded-lg bg-green-400 block md:inline-block">
                    Excle
                    <i class="fas fa-file-excel"></i>
                    </button>
                </a>
                <a class="hover:no-underline" href="{% url 'view_expense_pdf' %}" target="_blank">
                    <button class="py-1 px-2 text-white rounded-lg bg-green-400 block md:inline-block">
                    PDF
                    <i class="far fa-file-pdf"></i>
                    </button>
                </a>
                <a class="hover:no-underline" href="{% url 'pdf_expense_download' %}">
                    <button class="py-1 px-2 text-white rounded-lg bg-green-400 block md:inline-block">
                    Print
                    <i class="fas fa-print"></i>
                    </button>
                </a>
            </div>
            <div class="pb-3">
                <a href="{% url 'add_expense' %}">
                    <button type="button" class="btn btn-primary">
                    <i class="fa fa-plus"></i>
                        Add Expense
                    </button>
                </a>
                <a href="{% url 'add_type' %}">
                    <button type="button" class="btn btn-success">
                        <i class="fa fa-plus"></i>
                        Add Type
                    </button>
                </a>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th class="text-center">SL.</th>
                            <th class="text-center">Type</th>
                            <th class="text-center">Amount</th>
                            <th class="text-center">Note</th>
                            <th class="text-center">Date</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    
                    {% for expense in expenses %}
                    <tbody>
                        <tr>
                            <td class="text-center">{{ forloop.counter }}</td>
                            <td class="text-center">{{ expense.type }}</td>
                            <td class="text-center">${{ expense.amount|intcomma }}</td>
                            <td class="text-center">{{ expense.note  }}</td>
                            <td class="text-center">{{ expense.created_at|naturalday|title  }}</td>
                             <td class="text-center">
                                <button>
                                    <a class="text-white hover:no-underline py-1 px-3 text-white rounded-lg bg-green-400 block md:inline-block" href="{% url 'update_expense' expense.id %}">
                                        <i class="fa fa-edit" style="font-size:20px"></i>
                                    </a>
                                </button>

                            </td>
                        </tr>
                    </tbody>                    
                    {% endfor %}
                </table>
            </div>
            <!-- TODO: Dynamic Pagination  -->
            <!--- Pagination Start -->
            <div class="flex items-center justify-center lg:px-0 sm:px-6">
                <div class="lg:w-3/5 w-full  flex items-center justify-between border-t border-gray-200">
                    <div class="flex items-center pt-3 text-gray-600 hover:text-indigo-700 cursor-pointer">
                        <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.1665 4H12.8332" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M1.1665 4L4.49984 7.33333" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M1.1665 4.00002L4.49984 0.666687" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        <p class="text-sm ml-3 font-medium leading-none ">Previous</p>
                    </div>
                    <div class="sm:flex hidden">
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            1</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            2</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            3</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-indigo-700 border-t border-indigo-400 pt-3 mr-4 px-2">
                            4</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            5</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            6</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            7</p>
                        <p
                            class="text-sm font-medium leading-none cursor-pointer text-gray-600 hover:text-indigo-700 border-t border-transparent hover:border-indigo-400 pt-3 mr-4 px-2">
                            8</p>
                    </div>
                    <div class="flex items-center pt-3 text-gray-600 hover:text-indigo-700 cursor-pointer">
                        <p class="text-sm font-medium leading-none mr-3">Next</p>
                        <svg width="14" height="8" viewBox="0 0 14 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.1665 4H12.8332" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"
                                stroke-linejoin="round" />
                            <path d="M9.5 7.33333L12.8333 4" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M9.5 0.666687L12.8333 4.00002" stroke="currentColor" stroke-width="1.25"
                                stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </div>
                </div>
            </div>
            <p class="text-base">Showing 1/10</p>
            <!--- Pagination End -->
        </div>
        {% else %}
        <div class="bg-blue-100 border-t border-b border-blue-500 text-blue-700 px-4 py-3 p-2" role="alert">
            <p class="font-bold">NOTHING HERE...</p>
            <p class="text-sm">It's empty, here you don't have any data.</p>
          </div>
        {% endif %}
    </div>
    <!-- Expense Table -->
</div>
<!-- delete Modal-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Are you sure you want to delete this item?</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-footer">
                <button class="py-2 px-2 text-white rounded-lg bg-green-400 block md:inline-block" type="button" data-dismiss="modal">Cancel</button>
                <a class="py-2 px-2 text-white rounded-lg bg-red-400 block md:inline-block" href="login.html">Delete</a>
            </div>
        </div>
    </div>
</div>
{% endblock body %}